<template>
  <div class="comment-box">
    <div class="input-box">
      <div class="input-top">
        <div class="img">
          <img class="avatar" :src="img" alt="" />
          <p class="username">{{ getUserName }}</p>
        </div>
        <div class="text">
          <textarea class="comment-content" v-model="submitText"></textarea>
        </div>
      </div>
      <div class="input-bottom">
        <a href="javascript:void(0)" class="submit" @click="publicComment">发表评论</a>
      </div>
    </div>
    <div class="all_comment">
      <p class="title">
        全部评论<span class="total">{{ comments.length }}</span
        >条
      </p>
      <div class="comment-list">
        <div class="comment-item" v-for="item in comments" :key="item.id">
          <div class="item_l">
            <img class="avatar" :src="item.head_img" alt="" />
            <p class="username">{{ getUserName }}</p>
          </div>
          <div class="item_r">
            <div class="comment-content">
              <div class="comment_text">{{ item.cm_content }}</div>
              <div class="comment_time">
                <span class="date">{{ item.create_time }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FirstProjectComment',
  data() {
    return {
      userinfo: {},
      submitText: '',
      comments: [],
      img: ''
    }
  },
  methods: {
    async publicComment() {
      try {
        const { data: res } = await this.$http.post('/comment', {
          article_id: this.$route.params.id,
          content: this.submitText,
          username: window.sessionStorage.getItem('user')
        })
        this.submitText = ''
        this.getCommentList()
        // console.log(res)
      } catch {
        return this.$message.error('请先登录账号并在个人中心完善信息再发表评论')
      }
    },
    async getCommentList() {
      const { data: res } = await this.$http.get('CommentList', { params: { article_id: this.$route.params.id } })
      this.comments = res.data
      console.log(this.comments)
    },
    getDetail() {
      // console.log(this.$route.params.id)
    },
    async getHeadImg() {
      const { data: res } = await this.$http.post('/head_img', { username: this.getUserName })
      this.img = res.data[0].head_img
      console.log(res)
    }
  },
  created() {
    this.getDetail()
    this.getCommentList()
    this.getHeadImg()
  },
  mounted() {},
  computed: {
    getUserName() {
      return window.sessionStorage.getItem('user')
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-box {
  padding: 50px 30px;
  -webkit-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.157), 0 0px 3px rgba(0, 0, 0, 0.227);
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.157), 0 0px 3px rgba(0, 0, 0, 0.227);
  background: #fafafa;
  .signInText {
    text-align: center;
    color: #3b99fc;
    font-size: 18px;
    cursor: pointer;
  }
}
.input-box {
  .input-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    .img {
      width: 100px;
      text-align: center;
      .avatar {
        display: inline-block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #000;
      }
      .username {
        color: #3b99fc;
        cursor: pointer;
        word-break: break-all;
        margin-top: 10px;
      }
    }
    .text {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      textarea {
        width: 98%;
        margin-left: 2%;
        min-height: 90px;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 20px;
        box-sizing: border-box;
      }
    }
  }
  .input-bottom {
    margin-top: 20px;
    overflow: hidden;
    .submit {
      float: right;
      width: 100px;
      height: 50px;
      line-height: 50px;
      background: rgba(0, 0, 0, 0.2);
      text-align: center;
      border-radius: 6px;
      color: #fff;
      &:hover {
        background: rgba(0, 129, 255, 0.7);
      }
    }
  }
}
.all_comment {
  border-top: 1px solid #eee;
  padding: 30px 0;
  margin: 30px 0 0 0;
  .title {
    margin-bottom: 50px;
    font-size: 20px;
    font-weight: bold;
    border-left: 4px solid #3b99fc;
    padding-left: 20px;
  }
  .comment-list {
    .comment-item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 20px 0;
      border-bottom: 1px solid #eee;
      .item_l {
        width: 100px;
        text-align: center;
        .avatar {
          display: inline-block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          border: 1px solid #000;
          margin-bottom: 20px;
        }
        .username {
          color: #3b99fc;
          cursor: pointer;
          word-break: break-all;
        }
      }
      .item_r {
        flex: 1;
        .comment-content {
          width: 98%;
          margin-left: 2%;
          padding: 10px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          font-size: 14px;
          color: #666;
          .comment_text {
            min-height: 70px;
          }
          .comment_time {
            text-align: right;
            padding: 10px 0;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
